<script setup lang="ts">
import dayjs from 'dayjs';
import { nanoid } from 'nanoid';
import { getCurrentInstance, nextTick, ref, shallowRef } from 'vue';
import { PropagandaInfoApi } from '@/api/propaganda-info';
import AuthBar from '@/components/authBar/index.vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useRequest } from '@/hooks/useRequest';
import { useDictStore } from '@/store/dictStore';
import { buildAssetSource } from '@/utils';
import { formatDuration } from '@/utils/date.utils';
import { isEmpty } from '@/utils/is.utils';
import { currRoute } from '@/utils/router.utils';
import RelatedList from './components/relatedList.vue';

const { query } = currRoute();

const { data: materialDetail } = useRequest(() => PropagandaInfoApi.getMaterialDetail(Number(query.id)));

const { getDictLabel } = useDictStore();

const videoCtx = shallowRef<UniNamespace.VideoContext>();
const isPlaying = ref(false);
const $videoId = nanoid();

const instance = getCurrentInstance().proxy;

function handlePlay() {
  isPlaying.value = true;
  nextTick(() => {
    videoCtx.value = uni.createVideoContext($videoId, instance);
    videoCtx.value.play();
  });
}

// 增加阅读次数
useRequest(() => PropagandaInfoApi.increaseVideoHits(Number(query.id)));
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto px-48 pb-40 pt-40">
      <view class="page-content">
        <view class="post-block__card">
          <view class="post-block__cover">
            <template v-if="!isPlaying">
              <view class="post-cover__mask" />
              <view class="post-cover__play-icon" @click="handlePlay">
                <image :src="buildAssetSource('play.png')" class="h-full w-full" />
              </view>
              <view class="post-card__info pb-40 pl-28">
                <view class="post-card__category">
                  {{ getDictLabel(materialDetail?.materialClass, DictKeyEnum.TERMINAL_PROPAGANDA_CLASS) }}
                </view>
                <view class="post-card__title mt-20">
                  {{ materialDetail?.contentTitle }}
                </view>
                <view class="mt-44 flex items-center">
                  <view class="post-card__time">
                    <i class="iconfont icon-calendar-2-fill" />
                    {{ dayjs(materialDetail?.uploadTime).format('YYYY-MM-DD') }}
                  </view>
                  <view class="post-card__read-time ml-48">
                    <i class="iconfont icon-a-lujing5" />{{ formatDuration(materialDetail?.duration) }}
                  </view>
                </view>
              </view>
              <image
                :src="materialDetail?.coverFileUrl" class="h-full w-full"
                mode="aspectFit"
              />
            </template>
            <video v-else :id="$videoId" :src="materialDetail?.fileUrl" class="h-full w-full" object-fit="cover" :show-fullscreen-btn="false" />
          </view>
          <view class="post-card__content mt-44 px-32 pb-40">
            <rich-text :nodes="materialDetail?.content" />
          </view>
        </view>

        <!-- 相关推荐 -->
        <view class="mt-46 px-32">
          <RelatedList v-if="!isEmpty(materialDetail?.propagandaInfoRespList)" :data="materialDetail?.propagandaInfoRespList" />
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '健康宣教',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .post-block__card {
    border-radius: 20px;
    overflow: hidden;

    .post-block__cover {
      height: 584px;
      width: 100%;
      position: relative;

      .post-cover__mask {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1;
      }

      .post-cover__play-icon {
        width: 148px;
        height: 148px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
      }
    }

    .post-card__category {
      background: #dfecff;
      color: var(--primary);
      font-size: 32px;
      padding: 8px 32px;
      border-radius: 100px;
      display: inline-block;
    }

    .post-card__time,
    .post-card__read-time {
      font-size: 28px;
      color: #ffffff;

      .iconfont {
        font-size: 24px;
        margin-right: 8px;
      }
    }

    .post-card__info {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 11;
    }

    .post-card__title {
      color: #fff;
      font-size: 42px;
      font-weight: bold;
    }

    .post-card__content {
      font-size: 32px;
      color: #3d3d3d;
      border-bottom: 1px solid #c6dafa;
    }
  }

  .page-content {
    background: #f5f9ff;
    border-radius: 20px;
    padding-bottom: 20px;
  }
}
</style>
